<template>
	<view class="inquiryDescribe-wrap">
		<view class="inquiryDescribe-box">
			<u-title value="请描述您的病情" ></u-title>
			<textarea placeholder-class="textarea-place" :maxlength="1000" class="textarea-box" v-model="questionOrderForm.content" placeholder="请描述您的病情症状和就诊经历等信息" />

			<u-title value="本次患病多久了？"></u-title>
			<u-check-box ref="radio1" :list="durationList" :value="questionOrderForm.duration" @change="radioChangeType($event, 'duration')"></u-check-box>

			<u-title value="此次病情是否去医院就诊过？"></u-title>
			<u-check-box ref="radio2" :list="isLookHospList" :value="questionOrderForm.isLookHosp" @change="radioChangeType($event, 'isLookHosp')"></u-check-box>

			<u-title value="上传检查报告或患处照片（最多九张）"></u-title>

			<u-upload-image v-if="applyShow" :file-list="questionOrderForm.reportList" :limit="9" @on-success="uploadSuccess" @on-error="uploadError" @on-remove="uploadRemove" />

			<u-title value="上传复诊文件（PDF格式文件）"></u-title>
			
			<uni-file-picker
				ref="fileUploader"
				limit="1"
				mode="grid"
				:auto-upload="false"
				file-mediatype="all"
				@select="select"
				@progress="progress" 
				@success="success" 
				@fail="fail"
				@delete="deleteFile"
			>
				<view class="upload-btn" v-if="uploadBtnVisible">
					<uni-icons type="plusempty" color="#999999" size="30"></uni-icons>
				</view>
			</uni-file-picker>
			
			<view style="display: flex;align-items: center;margin: 30rpx auto 0;" @click="goAgreement">
				<view class="checkbox_wrap">
					<view class="checkbox_circle">
						<view v-if="hasRead"></view>
					</view>
				</view>
				<text class="agree-black">我已阅读并同意</text>
				<text class="agree-color">《{{ protocol.fast.title || '' }}》</text>
			</view>
		</view>

		<u-bottom-button value="选择患者信息" @click="save()" :disabled='questionOrderForm.isLookHosp == 0'></u-bottom-button>
	</view>
</template>

<script>
import uTitle from '@/components/u-title/u-title.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import uCheckBox from '../u-checkbox/u-checkbox.vue';
import uUploadImage from '@//components/u-upload-image/u-upload-image.vue';
import { mapState, mapMutations } from 'vuex';
import { apiUrl } from '../../config';
export default {
	components: {
		uBottomButton,
		uTitle,
		uCheckBox,
		uUploadImage
	},
	computed: {
		...mapState({
			questionOrderForm: state => state.questionOrderForm
		})
	},
	data() {
		return {
			applyShow: true,
			uploadBtnVisible: true,
			hasRead: false,
			protocol: {}
		};
	},
	onLoad(option) {
		uni.$on('choosePath', (res) => {
			this.hasRead = true
		})
	},
	onUnload() {
		uni.$off('choosePath')
	},
	onShow() {
		this.getProtocol()
	},
	methods: {
		...mapMutations({
			setQuestionOrderForm: 'setQuestionOrderForm',
			clearQuestionOrderForm: 'clearQuestionOrderForm',
		}),
		// 获取协议
		getProtocol() {
			this.$api.getProtocolsByType({ type: 'fast' }).then(e => {
				const { code, result } = e
				if (code == 200) {
					this.protocol = result
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			})
		},
		// 图片上传
		uploadSuccess(res) {
			if (res.code == 200) {
				this.questionOrderForm.reportList.push(res.result.url);
				this.setQuestionOrderForm(this.questionOrderForm)
				this.applyShow = false;
				this.applyShow = true;
			} else {
				uni.showToast({
					title: '文件上传失败',
					icon: 'none'
				});
			}
		},
		uploadError(e) {
			uni.showToast({
				title: '文件上传失败',
				icon: 'none'
			});
		},
		uploadRemove(e) {
			this.questionOrderForm.reportList.splice(e, 1);
			this.setQuestionOrderForm(this.questionOrderForm)
			this.applyShow = false;
			this.applyShow = true;
		},
		// 按钮选择
		radioChangeType(value, type) {
			if(value!=null){
				this.questionOrderForm[type] = value;
				this.setQuestionOrderForm(this.questionOrderForm)
			}
			if(type == 'isLookHosp' && value == 0){
				uni.showModal({
					title: '系统提示',
					content: '依据国家规定,线上问诊平台只可以接诊复诊患者,请前往线下医院就诊!',
					showCancel: false,
					success: res => {}
				})
			}
			console.log(value, type,'4444')
		},
		// PDF上传
		select(e){
			let that = this
			const format = e.tempFilePaths[0].split('.').pop().toLowerCase()
			if (format !== 'pdf') {
				uni.showToast({
					title: '请上传pdf文件',
					icon: 'none'
				})
				that.$refs.fileUploader.clearFiles()
				return
			} else {
				that.$refs.fileUploader.upload(e.tempFilePaths[0])
				const uploadTask = uni.uploadFile({
					url: apiUrl + '/aos/api/qiniu/upload',
					name: 'file',
					filePath: e.tempFilePaths[0],
					formData: {},
					header: {},
					success: uploadFileRes => {
						console.log('uploadFileRes: ', uploadFileRes);
						const res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							that.uploadBtnVisible = false
							that.questionOrderForm.reexaminationList = [{
								name: e.tempFiles[0].name,
								url: res.result.url
							}]
							that.setQuestionOrderForm(that.questionOrderForm)
						} else {
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
						}
					},
					fail: err => {
						console.log('err: ', err);
					}
				});
				uploadTask.onProgressUpdate(res => {
					console.log('res: ', res)
				});
			}
		},
		progress(e){
			console.log('上传进度：', e)
		},
		success(e){
			console.log('上传成功', e)
		},
		fail(e){
			console.log('上传失败：', e)
		},
		deleteFile() {
			this.uploadBtnVisible = true
			this.questionOrderForm.reexaminationList = []
			this.setQuestionOrderForm(this.questionOrderForm)
		},
		// 点击【选择患者信息】
		save(){
			if (!this.hasRead) {
				uni.navigateTo({
					url:'/pages/agreement/agreement?type=2'
				})
				return;
			}
			if(this.questionOrderForm.content){
				this.gotoRouter('/pages-member/patientList/patientList?type='+this.questionOrderForm.type)
			}else{
				uni.showToast({
					title: '请描述您的病情',
					icon: 'none'
				});
			}
			
		},
		goAgreement(){
			uni.navigateTo({
				url:'/pages/agreement/agreement?type=2'
			})
		},
	}
};
</script>

<style lang="less">
@import './inquiryDescribe.less';
.checkbox_wrap {
	padding-right: 24rpx;
	.checkbox_circle {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #222222;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		>view {
			width: 24rpx;
			height: 24rpx;
			background: #6E99C7;
			border-radius: 12rpx;
		}
	}
	
	.agree-color {
		font-size: 12px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(110, 153, 199, 1);
	}

}
</style>
